<template>
	<view class="word_choice_box">
		<view class="content flex_js">
			<view class="word_choice_left">
				<scroll-view scroll-y style="height: 100%;">
						<view class="left_item flex_ac" v-for="(item, index) in books" :key="item.id" @tap="bookClick(item, index)" :style="{'backgroundColor': index === bookIndex ? '#589b18fd' : '', 'color': index === bookIndex ? '#ffffff' : '#333333'}">{{ item.bookName }}</view>
				</scroll-view>
			</view>
			<view class="word_choice_right">
				<view class="title">
					<checkbox-group @change="selectAll">
						<checkbox color="#616bfa":checked="isAllChecked">{{ bookName || '全部单词' }}</checkbox>
					</checkbox-group>
				</view>
				<scroll-view scroll-y @scrolltolower="scrolltolowerWord" style="height: calc(100% - 88rpx);">
					<view class="right_box">
						<checkbox-group @change="checkboxChange">
							
							<label class="right_item flex_ac" v-for="item in words" :key="item.id">
								<view>
									<checkbox :value="item.id" color="#616bfa" :checked="item.checked" style="transform:scale(0.8)" />
								</view>
								<view :style="{'color' : item.checked ? '#616bfa' : ''}">{{item.word}}</view>
							</label>
						</checkbox-group>
						<uni-load-more status="statusMore" :content-text="contentText" ></uni-load-more>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="btn_fixed flex_ac_js">
			<uni-badge :text="checkCount" absolute="rightTop">
				<view class="left">已选</view>
			</uni-badge>
			<!-- goToPage(checkCount === 0 ? '' : '/pages/practices/dictationExercise/dictationExercise') -->
			<view class="btn" :style="{'opacity': checkCount === 0 ? '0.6' : '1'}" @tap="checkCount === 0 ? '' : onSubmit()">开始学习</view>
		</view>
	</view>
</template>

<script>
	import { bookAndPlan, bookAndPlanWords, wordByBook } from '@/api/homes/wordBook/wordBook.js'
	import { setStudyWord } from '@/api/practices/wordChoice.js'
	
	export default {
		data() {
			return {
				bookIndex: 0,
				bookName: '',
				books: [],
				words: [],
				checkCount: 0,
				isAllChecked: false,
				params: {
					page: 1,
					size: 20
				},
				paramsWord: {
					page: 1,
					size: 20,
					data: ''
				},
				statusMore: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				total: 0,
				ids: []
			}
		},
		onLoad() {
			this.getLibraryList()
			this.getBookAndPlanWords()
		},
		methods: {
			async getLibraryList() {
				const { data } = await bookAndPlan()
				this.books = data
				this.books.unshift({bookName: '全部单词'})
			},
			async getBookAndPlanWords() {
				let that = this
				that.params = {
					...that.params
				}
				try {
					const { code, data, total } = await bookAndPlanWords(that.params)
					if (code === 200) {
						that.total = total
						if (that.params.size * that.params.page >= total) {
							that.statusMore = 'noMore'
							uni.stopPullDownRefresh()
						} else {
							that.params.page ++
							that.statusMore = 'more'
						}
						that.words = [ ...that.words, ...data ]
						// that.total = total
						// if (total > that.params.size * that.params.page) {
						// 	that.statusMore = 'more'
						// 	that.params.page ++
						// 	that.words.push(...data)
						// } else if (total <= that.params.size * that.params.page) {
						// 	that.statusMore = 'noMore'
						// 	that.words = data
						// }
					}
				} catch (err) {
					that.statusMore = 'loading'
				}
			},
			async getListWord() {
				let that = this
				that.paramsWord = {
					...that.paramsWord
				}
				try {
					const { code, data, total } = await wordByBook(that.paramsWord)
					if (code === 200) {
						that.total = total
						if (that.paramsWord.size * that.paramsWord.page >= total) {
							that.statusMore = 'noMore'
							uni.stopPullDownRefresh()
						} else {
							that.paramsWord.page ++
							that.statusMore = 'more'
						}
						that.words = [ ...that.words, ...data ]
						// that.total = total
						// if (total > that.paramsWord.size * that.paramsWord.page) {
						// 	that.statusMore = 'more'
						// 	that.paramsWord.page ++
						// 	that.words.push(...data)
						// } else if (total <= that.paramsWord.size * that.paramsWord.page) {
						// 	that.statusMore = 'noMore'
						// 	that.words = data
						// }
					}
				} catch (err) {
					that.statusMore = 'loading'
				}
			},
			scrolltolowerWord() {
				if (this.statusMore !== 'noMore') {
					if (this.bookIndex !== 0) {
						this.getListWord()
					} else {
						this.getBookAndPlanWords()
					}
				}
			},
			async onSubmit() {
				try {
					const { code } = await setStudyWord(this.ids)
					if (code === 200) {
						uni.setStorageSync('words', { type: 'wordChoice' })
						uni.navigateTo({
							url: '/pages/practices/dictationExercise/dictationExercise'
						})
					}
				} catch (err) {}
			},
			bookClick(data, index) {
				this.bookIndex = index
				if(index === 0) {
					this.bookName = '全部单词'
					this.words = []
					this.getBookAndPlanWords()
				} else {
					this.paramsWord = {
						...this.paramsWord,
						page: 1,
						data: data.id
					}
					this.bookName = data.bookName
					this.words = []
					this.getListWord()
				}
			},
			checkboxChange(e) {
				this.checkCount = e.detail.value.length;
				this.ids = e.detail.value
				
				const idArr = new Set(e.detail.value)
				this.words.forEach(item => {
					if(idArr.has(item.id)) {
						item.checked = true
					} else {
						item.checked = false
					}
				})
				
			},
			selectAll() {
				this.isAllChecked = !this.isAllChecked
				this.ids = this.words.map(item => item.id)
				if (this.isAllChecked) {
					this.words.map(item => item.checked = true)
					this.checkCount = this.words.length
				} else {
					this.words.map(item => item.checked = false)
					this.checkCount = 0
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.word_choice_box {
	height: 100vh;
	background: $uni-bg-color-page;
	
	.content {
		height: calc(100% - env(safe-area-inset-bottom) - 132rpx);
		
		.word_choice_left {
			width: 200rpx;
			height: 100%;
			
			.left_item {
				width: 100%;
				height: 100rpx;
				// text-align: center;
				padding: 10rpx 30rpx;
				margin-bottom: 1rpx;
				// background-color: $uni-bg-color-disable;
				font-size: 28rpx;
			}
		}
		
		.word_choice_right {
			width: calc(100% - 200rpx);
			height: 100%;
			
			.title {
				height: 88rpx;
				color: $uni-text-color;
				padding: 12rpx 30rpx;
			}
			
			.right_box {
				padding: 0 30rpx 20rpx;
				
				.right_item {
					padding: 20rpx 0;
					margin-bottom: 20rpx;
					border-bottom: 2rpx solid #acb7c8;
				}
			}
			
		}
	}
	
	.btn_fixed {
		width: 100%;
		height: calc(env(safe-area-inset-bottom) + 132rpx);
		padding: 30rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
		position: fixed;
		left: 0;
		bottom: 0;
		
		.left {
			color: #616bfa;
		}
		
		.btn {
			width: 240rpx;
			height: 72rpx;
			line-height: 72rpx;
			background-color: #4445f7;
			color: #ffffff;
			border-radius: 50rpx;
			text-align: center;
		}
	}
	
}
</style>
